<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div>
			<p><span>购物车</span></p>
		</div>
		<div>
			<form>
				<table border="" cellspacing="" cellpadding="">
					<thead>
						<tr>
							
						  <th width="8%"><input type="checkbox" class="ckall" onclick="checkall(this)" />全选</th></th>
						 <th width="25%"></th>
						  <th width="25%">商品</th>
						  <th width="11%">单价</th>
						  <th width="15%">数量</th>					
						  <th width="11%">金额</th>					
						  <th >操作</th>					
						</tr>
					</thead>
					<tbody>
						<tr>
							 <td>
							<input type="checkbox" class="ckitem" />
							</td>
							<td><img src="../../../../../../Hbuilderworkspace/DEMO/img/collect.png" class="img-responsive" /></td>
							<td>联想(Lenovo)小新Air13 Pro 13.3英寸14.8mm超轻薄笔记本电脑</td>
							<td>¥<span id="goodsPrice1">5298</span></td>
							<td>
							<input type="button" value="-" class="num-btn" onclick="myfn1()" />
							<span>1</span>
							<input class="num-btn" type="button" value="+" onclick="myfn2()" />
							</td>
							<td><span id="goodsCast">0</span></td>
							<td>
							<input type="button" onclick="delCartItem(this)" class="cart-del btn btn-default btn-xs" value="删除" />
							</td>
						</tr>						
					</tbody>					
				</table>
				<div class="total-bar">
				    <a href="javascript:selDelCart()" class="cart-del-sel btn btn-default btn-xs">删除所选商品</a>
				    <span class="pull-right">已选商品
					<span id="selectCount">0</span>件 总价¥
					<span id="selectTotal">0</span>元
					</span>
				</div>
				<div>
					<input type="button" onclick="addEmp()" id="add" value="添加新商品"/>
					
				</div>
			</form>
			
		</div>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>		
		<script>
			function addEmp(){
				var $td1 = $("<td><input type='checkbox'/></td>");			
				var $td2 = $("<td><img src='../../../../../../Hbuilderworkspace/DEMO/img/collect.png' class='img-responsive' /></td>");
				var $td3 = $("<td>联想(Lenovo)小新Air13 Pro 13.3英寸14.8mm超轻薄笔记本电脑</td>");
				var $td4 = $("<td>5298</td>");
				var $td5 = $("<td><input type='button' value='-'- class='num-btn' onclick='myfn1()' /><input id='goodsCount' type='text' size='2' readonly='readonly' class='num-text' value='1'><input class='num-btn' type='button' value='+' onclick='myfn2()' /></td>");
				var $td6 = $("<td><span id='goodsCast'>0</span></td>");	
				var $td7 = $("<td><input type='button' onclick='delCartItem(this)' class='cart-del btn btn-default btn-xs' value='删除' /></td>");	
				var $tr = $("<tr></tr>");
				$tr.append($td1).append($td2).append($td3).append($td4).append($td5).append($td6).append($td7);
				
				
				$("table").append($tr);
			}
			
			function myfn2() {
				console.log($(this).parent().children("span"))
				//$("#goodsCount").val(n + 1);
				
			}
			
			function myfn1() {
				var n = parseInt($("#goodsCount").val());
				if (n == 0)
					return;
				$("#goodsCount").val(n - 1);				
			}
			function checkall(ckbtn) {
				$(".ckitem").prop("checked", $(ckbtn).prop("checked"));
				
			}
			//删除按钮
			function delCartItem(btn) {
				
				$(btn).parents("tr").remove();
				
			}
			//批量删除按钮
			function selDelCart() {
				//遍历所有按钮
				for (var i = $(".ckitem").length - 1; i >= 0; i--) {
					//如果选中
					if ($(".ckitem")[i].checked) {
						//删除
						$($(".ckitem")[i]).parents("tr").remove();
					}
				}
				
			}
			$(function() {
				//单选一个也得算价格
				$(".ckitem").click(function() {
						//calcTotal();
					})
					//开始时计算价格
					//calcTotal();
			})
			//计算单行小计价格的方法
			function calcRow() {
				//取单价
				var vprice = parseFloat($("#goodsPrice").html());
				//取数量
				var vnum = parseFloat($("#goodsCount").val());
				//小计金额
				var vtotal = vprice * vnum;
				//赋值
				$("#goodsCast").html("¥" + vtotal);
			}
			
		</script>
	</body>
</html>
